Visual Studio Codeでユーザー独自のスニペットを定義する

今年の4月に開催されたマイクロソフトの開発者向けイベント「Build 2015」で発表された、マイクロソフト謹製のコードエディタVisual Studio Code。

発表後も着々と開発が進んでいるようで、本日2回目のアップデートとなるv0.5.0がリリースされました。 (因みに1回目のアップデートは v0.3.0でした。)

このVisual Studio Code、まだプレビュー版ということもあり、v0.3.0まではカスタマイズできる範囲がフォントサイズ等のエディタ本体の動作設定部分とキーバインディングとに限られていたのですが、今回のアップデートでユーザー独自のスニペットを追加できる機能が追加されましたので、早速試してみました。

その前に、改めてVisual Studio Codeとは

• マイクロソフト謹製のコードエディタ
• クロスプラットフォーム対応(Windows, Mac, Linux)
• Electronベース
• 特徴的な機能
• Git連携
• IntelliSense(プロパティやメソッドの候補表示)
• Node.jsアプリケーションのデバッグ

類似のSublime TextやAtomと比較してまだまだ機能不足な面があるため、今すぐ乗り換えを！というのは難しそうですが(特にプラグイン機構を備えていないところが大きなディスアドバンテージかと思います)、Visual Studio由来の強力なIntelliSenseは非常に魅力的です。(※IntelliSenseが効くのはC#、Javascriptなどの一部言語のみです。)

公式サイトでもDevelop ASP.NET and Node applications at lightning speedと謳われていますが、IntelliSenseとデバッグ機能をサポートしているという意味で、Node.jsアプリケーション開発用のエディタとしては即戦力レベルなのではないかと思います。

ユーザー定義スニペットの追加手順

では本題に入りたいと思います。

ユーザー定義スニペットは、「Code」-「Preferences」-「User Snippets」から設定します。

スニペットは言語毎の設定となります。スニペットを追加したい言語を選択します。

スニペット定義はJSONで書いていきます。JSONファイル冒頭のコメント欄にあるExampleを見てみましょう。

{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}

キー	説明
"Print to console"	スニペットの識別名。任意の名前を設定する。
"prefix"	このキーの値に、スニペット展開のトリガーとなる文字を値を設定する。
"body"	このキーの値に、展開されるコードやテキストを設定する。

このExampleは、logと入力してTABキーを押下すると、console.log('');というコードが展開される、という設定です。

$1、$2はタブ位置を表します。コードやテキストが展開されると、カーソルが自動的に$1の位置に移動します。更にTABキーを押下するとカーソルが$2の位置に、更にTABキーを押下すると、、、といった動作です。

これは例えばスニペットでメソッドを展開し、その引数の位置に$1などを指定する、といった使い方となりますが、この引数のデフォルト値や引数の説明を表示したい場合があるかと思います。その場合は$1の変わりに${1:log context}と書くと、console.log('log context');というコードが、log contextの部分が選択された状態で展開されます。

この他、${log context}のようにキーとなる数字を省いて直接デフォルト値や説明にあたるテキストを書く方法や、${id:log context}のように数字ではなく任意のテキスト(この例ではid)をタブ位置の識別子として使うことも出来ます。

この辺りは実際にスニペットを定義してみて動作を確認してみるのが分かりやすいと思います。

CloudFormation用のスニペット

こちらのブログエントリでAtomでAWS CloudFormation用のスニペットを定義する手順をご紹介しましたが、同様のスニペットをVisual Studio Codeでも定義してみたいと思います。

例えばtag用のスニペットです。以下のような定義をしておくと、

"tag": {
"prefix": "tag",
"body": "{ "Key": "${1:-}", "Value": ${2:"--"} }"

以下のようなコードが展開されます。

{ "Key": "-", "Value": "--" }

という定義を一つ一つ追加していくのは骨が折れるので、こちらのエントリで作成したAtom用のスニペット(cson)のVisual Studio Code版(json)を用意しました。よろしければお使い下さい。

Gist - Visual Studio Code Snippets for AWS CloudFormation Template

まとめ

今回のアップデートに含まれるものとしては、ES6サポートも注目の機能かと思います。

次のステップとして、プラグイン機構がどのような形で実装されるのかに注目しています。(同じElectronベースということで、先行するAtomのプラグインのコンバータなどが提供されるのでしょうか。)

Visual Studioで培ったノウハウが反映されたVisual Studio Code。今後のアップデートを注意深く見守っていきたいと思います。

参考

• Visual Studio Code 公式サイト